{% extends "base.html" %}

{% block title %}舆情预警管理{% endblock %}

{% block breadcrumb %}舆情预警管理{% endblock %}

{% block content %}
<!-- 预警概览 -->
<div class="alert-overview">
    <div class="alert-stat">
        <div class="stat-icon red">
            <i class="material-icons">warning</i>
        </div>
        <div class="stat-info">
            <span class="value">5</span>
            <span class="label">高危预警</span>
        </div>
    </div>
    <div class="alert-stat">
        <div class="stat-icon orange">
            <i class="material-icons">info</i>
        </div>
        <div class="stat-info">
            <span class="value">12</span>
            <span class="label">中度预警</span>
        </div>
    </div>
    <div class="alert-stat">
        <div class="stat-icon blue">
            <i class="material-icons">notifications</i>
        </div>
        <div class="stat-info">
            <span class="value">25</span>
            <span class="label">低危预警</span>
        </div>
    </div>
</div>

<!-- 预警规则管理 -->
<div class="card">
    <div class="card-header">
        <h3>预警规则配置</h3>
        <button class="btn-primary">
            <i class="material-icons">add</i>
            新建规则
        </button>
    </div>
    <div class="rule-list">
        <div class="rule-item">
            <div class="rule-info">
                <h4>负面舆情快速上升</h4>
                <p>当负面情感占比在1小时内上升超过20%时触发</p>
            </div>
            <div class="rule-status">
                <span class="tag tag-active">已启用</span>
                <div class="rule-actions">
                    <button class="btn-icon">
                        <i class="material-icons">edit</i>
                    </button>
                    <button class="btn-icon">
                        <i class="material-icons">delete</i>
                    </button>
                </div>
            </div>
        </div>
        <!-- 更多规则项 -->
    </div>
</div>

<!-- 预警历史记录 -->
<div class="card">
    <div class="card-header">
        <h3>预警历史</h3>
        <div class="card-tools">
            <button class="btn-text">
                <i class="material-icons">filter_list</i>
                筛选
            </button>
            <button class="btn-text">
                <i class="material-icons">file_download</i>
                导出
            </button>
        </div>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>时间</th>
                <th>预警类型</th>
                <th>触发规则</th>
                <th>预警内容</th>
                <th>处理状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2024-03-10 14:30</td>
                <td><span class="tag tag-danger">高危</span></td>
                <td>负面舆情快速上升</td>
                <td>某话题负面情感占比升至45%</td>
                <td><span class="status pending">待处理</span></td>
                <td>
                    <button class="btn-text">处理</button>
                    <button class="btn-text">详情</button>
                </td>
            </tr>
            <!-- 更多预警记录 -->
        </tbody>
    </table>
</div>
{% endblock %} 